<template>
  <div class="main">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="hover" class="make-title">
          <a href="#" class="title">
            <strong>无预约</strong>
            <span
              >下一位预约：<i>{{ nextCustomer }}</i></span
            >
          </a>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="patient">
          <a href="#" class="title">
            <strong>{{ customerCount }}</strong>
            <span>患者管理</span>
          </a>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="diagnose">
          <a href="#" class="title">
            <strong>{{ customerDiagnosisCount }}</strong>
            <span>诊断管理</span>
          </a>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="drug">
          <a href="#" class="title">
            <strong>{{ customerDrugCount }}</strong>
            <span>药品管理</span>
          </a>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12" class="home-two">
      <el-col :span="14" class="notice">
        <div class="header">
          <span>公告通知</span>
          <div>
            <el-button
              type="primary"
              round
              icon="el-icon-minus"
              @click="hideCalendar('tableModule')"
            ></el-button>
            <el-button
              type="primary"
              round
              icon="el-icon-plus"
              @click="vsibeCalendar('tableModule')"
            ></el-button>
            <el-button type="primary" round icon="el-icon-more"></el-button>
          </div>
        </div>
        <tableModule ref="tableModule"></tableModule>
      </el-col>
      <el-col :span="10" class="calendar">
        <div class="header calendar-header">
          <span>行事日历</span>
          <div>
            <el-button
              type="primary"
              round
              icon="el-icon-minus"
              @click="hideCalendar('calendar')"
            ></el-button>
            <el-button
              type="primary"
              round
              icon="el-icon-plus"
              @click="vsibeCalendar('calendar')"
            ></el-button>
            <el-button type="primary" round icon="el-icon-more"></el-button>
          </div>
        </div>
        <calendarSelect ref="calendar"></calendarSelect>
      </el-col>
    </el-row>
    <el-row :gutter="12" class="home-two">
      <el-col :span="14" class="notice">
        <div class="header canvas-header">
          <span>诊断统计</span>
          <div>
            <el-button
              type="primary"
              round
              icon="el-icon-minus"
              @click="hideCalendar('canvas')"
            ></el-button>
            <el-button
              type="primary"
              round
              icon="el-icon-plus"
              @click="vsibeCalendar('canvas')"
            ></el-button>
          </div>
        </div>
        <canvasMoudel ref="canvas"></canvasMoudel>
      </el-col>
      <el-col :span="10" class="memo">
        <div class="header memo-header">
          <span>我的便签</span>
          <div>
            <el-button
              type="primary"
              round
              icon="el-icon-minus"
              @click="hideMemo()"
            ></el-button>
            <el-button
              type="primary"
              round
              icon="el-icon-plus"
              @click="vsibeMemo()"
            ></el-button>
            <el-button type="primary" round icon="el-icon-more"></el-button>
          </div>
        </div>
        <div class="memo-main" v-show="isMemo">
          <memoDoule
            v-for="item in memoData"
            :key="item.time"
            :memoItem="item"
          ></memoDoule>
          <div class="addmemo">
            <el-input
              placeholder="请输入便签内容"
              v-model="MemoText.content"
              class="input-with-select"
            >
              <el-button
                slot="append"
                icon="el-icon-plus"
                @click="addMemo"
              ></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import storage from "../../utils/storage";

import tableModule from "../../components/components_wxq/table.vue";
import calendarSelect from "../../components/components_wxq/calendar.vue";
import canvasMoudel from "../../components/components_wxq/canvas.vue";
import memoDoule from "../../components/components_wxq/memo.vue";
import { home, addmemo, memo } from "../../utils/api/home";

export default {
  name: "firstPage",
  components: {
    tableModule,
    calendarSelect,
    canvasMoudel,
    memoDoule,
  },
  data() {
    return {
      isMemo: true,
      MemoText: {
        title: "无标题",
        content: "",
        employeeId: "",
        star: "",
      },
      nowPage: {
        id: null,
        limit: 5,
        page: 1,
        search: null,
      },

      customerCount: null,
      customerDiagnosisCount: null,
      customerDrugCount: null,
      nextCustomer: null,
      memoData: [],
      homeData: {
        username: null,
        search: null,
      },
    };
  },
  methods: {
    hideCalendar(str) {
      this.$refs[str].changeHide();
    },
    vsibeCalendar(str) {
      this.$refs[str].changeVisible();
    },
    hideMemo() {
      this.isMemo = false;
    },
    vsibeMemo() {
      this.isMemo = true;
    },
    setMemo() {
      memo(this.nowPage).then((data) => {
        console.log(data);
      });
    },
    addMemo() {
      addmemo(this.MemoText).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.setMemo();
        }
      });
    },
  },
  computed: {},
  watch: {},
  mounted() {
    // this.$refs.canvas.myCanvas();
  },
  created() {
    this.homeData.username = storage.getStorage("username");
    home(this.homeData).then((data) => {
      console.log(data);
      this.customerCount = data.data.data.customerCount;
      this.customerDiagnosisCount = data.data.data.customerDiagnosisCount;
      this.customerDrugCount = data.data.data.customerDrugCount;
      this.memoData = data.data.data.employeeNote.slice(0, 5);
      this.MemoText.employeeId = data.data.data.employee.id;
      storage.setStorage("id", data.data.data.employee.id);
      this.nextCustomer = data.data.data.nextCustomer || "无预约";
      this.nowPage.id = data.data.data.employee.id;
      this.memoData.forEach((item) => {
        let str1 = item.createTime.slice(0, 10);
        item.createTime = str1;
        //  this.MemoText.id=item.createTime.id
      });
    });
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .el-row {
    margin-bottom: 20px;
    width: 100%;
  }
  //   .el-col {
  //     padding: 0 !important;
  //   }
  .el-card {
    height: 120px;
  }
  .el-card /deep/ .el-card__body {
    height: 100%;
    padding: 28px 24px;
    box-sizing: border-box;
  }
  .make-title /deep/ .el-card__body {
    background-color: #41b6e6;
  }
  .patient/deep/ .el-card__body {
    background-color: #e18530;
  }
  .diagnose /deep/ .el-card__body {
    background-color: #9941e6;
  }
  .drug /deep/ .el-card__body {
    background-color: #4165e6;
  }
  .title {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    strong {
      color: rgb(255, 255, 255);
      font-size: 24px;
      letter-spacing: 3px;
    }
    span {
      color: rgb(217, 224, 236);
      font-size: 14px;
    }
  }
  .home-two {
    width: 100%;
    justify-content: space-between;
    .header {
      background-color: #fff;
      border-radius: 6px 6px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 16px;
      border-bottom: 1px solid #e4e7ed;
      border-top: 4px solid #41b6e6;
      .el-button {
        padding: 4px 6px;
        background-color: #68d7f3 !important;
        border: 1px solid #68d7f3;
        color: #ffffff;
        &:focus {
          background-color: #74a0c9;
        }
      }
    }
    .calendar-header {
      border-top: 4px solid #e18530;
      .el-button {
        background-color: #ffbb1b !important;
        border: 1px solid #f7c623;
      }
    }
    .canvas-header {
      border-top: 4px solid #9941e6;
      .el-button {
        background-color: #9941e6 !important;
        border: 1px solid #9941e6;
      }
    }
    .memo-header {
      border-top: 4px solid #4165e6;
      .el-button {
        background-color: #4165e6 !important;
        border: 1px solid #4165e6;
      }
    }
    .memo-main {
      height: 450px;
      background-color: #fff;
      padding: 20px;
      box-sizing: border-box;
    }
    .addmemo {
      .el-input /deep/ .el-input__inner {
        &:focus {
          border: 1px solid #4165e6;
        }
      }
      .el-button {
        background-color: #4165e6;
        color: #fff;
        border-radius: 0 4px 4px 0;
        border: 1px solid #4165e6;
      }
    }
  }
}
</style>
